<template>
  <a-layout :class="['admin-layout']">
    <!-- <audio
      id="MessageAudio"
      preload="auto|metadata|none"
      hidden="hidden"
      controls="controls"
    >
      <source src="@/assets/13724.wav">
    </audio> -->

    <audio
      v-if="ringstoneList.findIndex(v => v.fileName === 'alert1') !== -1"
      :id="
        'MessageAudio' + ringstoneList.find(v => v.fileName === 'alert1')['priority']
      "
      :data-priority="ringstoneList.find(v => v.fileName === 'alert1')['priority']"
      preload="auto|metadata|none"
      hidden="hidden"
      controls="controls"
    >
      <source src="@/assets/alert1.mp3">
    </audio>
    <audio
      v-if="ringstoneList.findIndex(v => v.fileName === 'alert2') !== -1"
      :id="
        'MessageAudio' + ringstoneList.find(v => v.fileName === 'alert2')['priority']
      "
       :data-priority="ringstoneList.find(v => v.fileName === 'alert2')['priority']"
      preload="auto|metadata|none"
      hidden="hidden"
      controls="controls"
    >
      <source src="@/assets/alert2.mp3">
    </audio>
    <audio
      v-if="ringstoneList.findIndex(v => v.fileName === 'alert3') !== -1"
      :id="
        'MessageAudio' + ringstoneList.find(v => v.fileName === 'alert3')['priority']
      "
       :data-priority="ringstoneList.find(v => v.fileName === 'alert3')['priority']"
      preload="auto|metadata|none"
      hidden="hidden"
      controls="controls"
    >
      <source src="@/assets/alert3.mp3">
    </audio>
    <audio
      v-if="ringstoneList.findIndex(v => v.fileName === 'alert4') !== -1"
      :id="
        'MessageAudio' + ringstoneList.find(v => v.fileName === 'alert4')['priority']
      "
       :data-priority="ringstoneList.find(v => v.fileName === 'alert4')['priority']"
      preload="auto|metadata|none"
      hidden="hidden"
      controls="controls"
    >
      <source src="@/assets/alert4.mp3">
    </audio>
    <template v-for="v in ringstoneList">
        <audio
        :key="v.id"
        v-if="v.filePath+''!='null'"
        :id="
          'MessageAudio' +v['priority']
        "
        :data-priority="v['priority']"
        preload="auto|metadata|none"
        hidden="hidden"
        controls="controls"
      >
        <source :src="v.filePath">
      </audio>
    </template>

    <a-layout class="admin-layout-main">
      <admin-header
        :class="[
          {
            'fixed-tabs': fixedTabs,
            'fixed-header': fixedHeader,
            'multi-page': multiPage
          }
        ]"
        :style="headerStyle"
        :menu-data="headMenuData"
        :collapsed="collapsed"
        @toggleCollapse="toggleCollapse"
      />
      <!-- <a-layout-header v-show="fixedHeader" :class="['virtual-header', {'fixed-tabs' : fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" /> -->

      <div class="header-middle-box" :style="`height:${headerHeight}`">
        <!-- <div class="hearder-icon-nav" :style="`left:${sideMenuWidth}`">
          <a-icon :component="$route.meta.customIcon" />
          <span class="fs-18 ml-12">{{ $route.name }}</span>
        </div> -->
        <!--
        <div v-if="!hideAcarsTime" class="fs-14 text-color-fff">
          最后一条报文时间{{ $route.path==='/fraMonitoring'?fraAcarsTime:acarsTime }}
        </div> -->
        <planeImg class="plane-img-box" />
        <!-- <a-icon :component="require('@/assets/img/plane.svg')" class="plane-img" /> -->
      </div>

      <a-layout-content class="admin-layout-content beauty-scroll">
        <!-- <drawer v-if="isMobile" v-model="drawerOpen">
          <side-menu :theme="theme.mode" :menu-data="menuData" :collapsed="true" :collapsible="false" @menuSelect="onMenuSelect" @toggleCollapse="toggleCollapse" />
        </drawer> -->

        <side-menu
          v-if="layout === 'side' || layout === 'mix'"
          :class="['admin-layout-slider']"
          :style="`height:calc(100% - ${headerHeight})`"
          :theme="theme.mode"
          :menu-data="sideMenuData"
          :collapsed="collapsed"
          :collapsible="true"
          @toggleCollapse="toggleCollapse"
        />
        <div
          v-if="fixedSideBar && !isMobile"
          :style="
            `width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`
          "
          class="virtual-side"
        />
        <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
          <div slot="handler" class="setting">
            <a-icon :type="showSetting ? 'close' : 'setting'" />
          </div>
          <setting />
        </drawer>
        <!-- 修改布局只需修改pt的计算和 comm-search的top 其余高度会自动计算-->
        <div class="rb-main-box" :style="`padding-top:${pt}px`">
          <slot />
        </div>
      </a-layout-content>
      <!-- <a-layout-footer style="padding: 0px">
        <page-footer :link-list="footerLinks" :copyright="copyright" />
      </a-layout-footer> -->
    </a-layout>

    <!-- 历史事件汇总 -->
    <flightLegHistory
      :report-handler="reportHandlerFH"
      @close="closeReportHandler"
    />

    <!-- 当前航段详情 -->
    <flightLegDetails @close="closeReportHandler" />

    <!-- ef报告 -->
    <efReport @close="closeReportHandler" />

    <!-- faultReport -->
    <faultReport @close="closeReportHandler" />

    <!-- 航段 -->
    <lefInfo @close="closeReportHandler" />

    <!-- 快照 -->
    <snapshot :report-handler="reportHandlerFH" @close="closeReportHandler" />

    <!-- 报文上传 -->
    <messageUpload @close="closeReportHandler" />

    <!-- 事件详情 -->
    <eventDetails
      :report-handler="reportHandler2"
      :row-index="0"
      @close="closeReportHandler"
    />
    <!-- 航班信息 -->
    <airportInfo @close="closeReportHandler" />

    <!-- 统计详情 -->
    <faultDetails :report-handler="reportHandlerFH" />

    <faultDetails2 :report-handler="reportHandlerFH" />

    <!-- 帮助 -->
    <about />
  </a-layout>
</template>

<script>
import AdminHeader from './header/AdminHeader';
// import PageFooter from './footer/PageFooter';
import Drawer from '../components/tool/Drawer';
import SideMenu from '../components/menu/SideMenu';
import Setting from '../components/setting/Setting';
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
import flightLegHistory from '@/pages/fraMonitoring/components/flightLegHistory';
import flightLegDetails from '@/pages/fraMonitoring/components/flightLegDetails';
import messageUpload from '@/pages/fraMonitoring/components/messageUpload';
import efReport from '@/pages/fraMonitoring/components/efReport';
import faultReport from '@/pages/fraMonitoring/components/faultReport';
import lefInfo from '@/pages/fraMonitoring/components/lefInfo';
import snapshot from '@/pages/fraMonitoring/components/snapshot';
import eventDetails from '@/pages/eventMonitoring/components/eventDetails';
import airportInfo from '@/pages/fraMonitoring/components/airportInfo';
import faultDetails from '@/pages/faultMonitoring/components/faultDetails';
import faultDetails2 from '@/pages/faultMonitoring/components/faultDetails2';
import about from '@/pages/fraMonitoring/components/about';
import planeImg from '@/assets/img/plane.svg';
// const minHeight = window.innerHeight - 64 - 122

export default {
  name: 'AdminLayout',
  components: {
    about,
    Setting,
    SideMenu,
    Drawer,
    AdminHeader,
    flightLegHistory,
    flightLegDetails,
    efReport,
    faultReport,
    lefInfo,
    snapshot,
    messageUpload,
    eventDetails,
    airportInfo,
    faultDetails,
    faultDetails2,
    planeImg
  },
  data() {
    return {
      minHeight: window.innerHeight - 32 - 46 - 110,
      showSetting: false,
      drawerOpen: false,
      list: ['alert2', 'alert1', 'alert3']
    };
  },
  provide() {
    return {
      adminLayout: this
    };
  },
  computed: {
    ...mapState('user', ['noticeList','noticeList0']),
    ...mapState('setting', [
      'isMobile',
      'theme',
      'layout',
      'footerLinks',
      'copyright',
      'fixedHeader',
      'fixedSideBar',
      'fixedTabs',
      'hideSetting',
      'multiPage',
      'collapsed',
      'acarsTime',
      'fraAcarsTime',
      'helpFlag',
      'pt',
      'ringstoneList'
    ]),
    ...mapGetters('setting', [
      'firstMenu',
      'subMenu',
      'menuData',
      'sideMenuWidth'
    ]),
    headerStyle() {
      // const width = (this.fixedHeader && this.layout !== 'head' && !this.isMobile) ? `calc(100% - ${this.sideMenuWidth})` : '100%';
      const position = this.fixedHeader ? 'fixed' : 'static';
      return `width: ${'100%'}; position: ${position};z-index:130`;
    },
    headMenuData() {
      const { layout, menuData, firstMenu } = this;
      return layout === 'mix' ? firstMenu : menuData;
    },
    sideMenuData() {
      const { layout, menuData, subMenu } = this;
      return layout === 'mix' ? subMenu : menuData;
    },
    // paddingTop() {
    //   return this.$route.meta.paddingTop ?? '16px';
    // },
    headerHeight() {
      return this.$route.meta.headerHeight ?? '60px';
    },
    hideAcarsTime() {
      return this.$route.meta.hideAcarsTime ?? false;
    }
  },
  watch: {
    $route(val) {
      this.setActivated(val);
      this.$nextTick(() => {
        this.$store.dispatch('setting/setPageHeight');
      });
    },
    pt: {
      handler() {
        this.$nextTick(() => {
          this.$store.dispatch('setting/setPageHeight');
        });
      },
      immediate: true
    },
    layout() {
      this.setActivated(this.$route);
    },
    isMobile(val) {
      if (!val) {
        this.drawerOpen = false;
      }
    }
  },
  created() {
    this.correctPageMinHeight(this.minHeight);
    this.setActivated(this.$route);
    // 航空公司
    this.getFtmAirline();
    this.getEventList();
    // 机队
    this.getFtmFleet();
    // 获取机号列表
    this.getFtmAirplaneList();
    this.getAtaListList();
    this.getFtmAirportList();
    // 机型
    this.getFtmPlaneModelList();
  },
  beforeDestroy() {
    this.correctPageMinHeight(-this.minHeight);
  },
  methods: {
    myplay() {
      this.$nextTick(() => {
        const obj = {};
        let arr = []
        Array.from(Array(3)).forEach((v, i) => {
         arr.push(document.querySelector('#MessageAudio' + (i+1)));
        });
        arr = arr.filter(v=>v)
        arr.sort((a,b)=>b.dataset.priority-a.dataset.priority)
      // 判断是否每个等级未读消息是否存在
      for(let i=1;i<=3;i++){
        if(!this.noticeList0.find(v=>v?.priority==i)){
         let a= arr.findIndex(v=>v.dataset.priority==i)
         if(a!=-1){
            arr.splice(a,1)
         }
        }
      }

      // 初始化空对象
      delete obj.a0
      delete obj.a1
      delete obj.a2
       arr.forEach((v,i)=>{
        obj['a'+i] = v
       })
      if (obj.a0) {
          obj.a0.play();
          obj.a0.addEventListener('ended', () => {
            if (obj.a1) {
              obj.a1.play();
              obj.a1.addEventListener('ended', () => {
                if (obj.a2) {
                  obj.a2.play();
                }
              });
            }
          });
        }
      });
    },
    ...mapActions('fraMonitoring', [
      'getFtmAirline',
      'getEventList',
      'getFtmFleet',
      'getFtmAirplaneList',
      'getAtaListList',
      'getFtmAirportList',
      'getFtmPlaneModelList'
    ]),
    ...mapMutations('setting', [
      'correctPageMinHeight',
      'setActivatedFirst',
      'setCollapsed'
    ]),
    ...mapMutations('fraMonitoring', ['setState']),
    toggleCollapse() {
      this.setCollapsed(!this.collapsed);
    },
    onMenuSelect() {
      this.toggleCollapse();
    },
    setActivated(route) {
      if (this.layout === 'mix') {
        let matched = route.matched;
        matched = matched.slice(0, matched.length - 1);
        const { firstMenu } = this;
        for (const menu of firstMenu) {
          if (matched.findIndex(item => item.path === menu.fullPath) !== -1) {
            this.setActivatedFirst(menu.fullPath);
            break;
          }
        }
      }
    },
    closeReportHandler(flag) {
      this.setState({ key: flag, payload: false });
    },
    // 把所有抽屉重置
    closeAllDrawersPopUp() {
      this.setState({ key: 'flightLegDetailsVisible', payload: false });
      this.setState({ key: 'flightLegHistoryVisible', payload: false });
      this.setState({ key: 'efReportVisible', payload: false });
      this.setState({ key: 'faultReportVisible', payload: false });
      this.setState({ key: 'snapshotVisible', payload: false });
      this.setState({ key: 'messageUploadVisible', payload: false });
    },
    reportHandler2(e, record, flag, index, select = false) {
      e.stopPropagation();
      const currentRow = {
        ...record
      };

      if (this.$store.state.setting.openType !== '_blank') {
        this.closeAllDrawersPopUp();
      }
      localStorage.setItem('row', JSON.stringify(currentRow));

      if (flag === 'taskResearchVisible') {
        localStorage.setItem('trRow', JSON.stringify({ ...record }));
        this.setState({ key: 'eventDetailsVisible', payload: false });

        if (this.$store.state.setting.openType === '_self') {
          this.$router.push({ path: 'taskResearch', query: { m: '1' }});
        } else {
          const uuid = new Date().getTime();
          const routeData = this.$router.resolve({
            path: 'taskResearch',
            query: { m: '1', uuid }
          });
          window.open(routeData.href, this.$store.state.setting.openType);
        }
      }
      this.setState({ key: flag, payload: true });
    },
    reportHandlerFH(record, flag) {
      // scRow 指的弹窗后其他弹出的弹窗数据
      localStorage.setItem('scRow', JSON.stringify({ ...record }));
      if (flag === 'taskResearchVisible') {
        localStorage.setItem('trRow', JSON.stringify({ ...record }));
        this.setState({ key: 'eventDetailsVisible', payload: false });
        if (this.$store.state.setting.openType !== '_blank') {
          this.closeAllDrawersPopUp();
        }
        // const modalList =
        // localStorage.getItem('showModal')
        //   ? JSON.parse(localStorage.getItem('showModal')) : [];

        // modalList.push('flightLegHistoryVisible');
        // localStorage.setItem('showModal', JSON.stringify(modalList));

        if (this.$store.state.setting.openType === '_self') {
          this.$router.push({ path: 'taskResearch', query: { m: '1' }});
        } else {
          const uuid = new Date().getTime();
          const routeData = this.$router.resolve({
            path: 'taskResearch',
            query: { m: '1', uuid }
          });
          window.open(routeData.href, this.$store.state.setting.openType);
        }
      }
      this.setState({ key: flag, payload: true });
    }
  }
};
</script>

<style lang="less" scoped>
.admin-layout {
  .side-menu {
    &.fixed-side {
      position: fixed;
      height: 100vh;
      left: 0;
      top: 0;
    }
  }
  .virtual-side {
    transition: all 0.2s;
  }
  .virtual-header {
    transition: all 0.2s;
    opacity: 0;
    &.fixed-tabs.multi-page:not(.fixed-header) {
      height: 0;
    }
  }
  .admin-layout-main {
    height: 100vh;
    .admin-header {
      top: 0;
      right: 0;
      overflow: hidden;
      transition: all 0.2s;
      &.fixed-tabs.multi-page:not(.fixed-header) {
        height: 0;
      }
    }
  }
  .admin-layout-content {
    display: flex;
    flex: 1;
    padding: 0px;
    overflow-x: hidden;
  }
  .setting {
    background-color: @primary-color;
    color: @base-bg-color;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px @shadow-color;
  }
  .ant-layout-has-sider {
    flex-direction: column;
  }
  .ant-layout-header {
    height: 60px !important;
    z-index: 12;
    width: 100%;
    position: fixed;
    top: 0;
    background: transparent;
    display: flex;
    align-items: center;
    /deep/.admin-header-wide {
      width: 100%;
    }
    // background:@p-color-2;
  }
  .ant-layout-sider {
    overflow-x: hidden;
    position: fixed !important;
    left: 0 !important;
    height: 100%;
  }
  .ant-layout-sider-collapsed {
    width: 56px !important;
    min-width: 56px !important;
    flex: 0 0 56px !important;
    /deep/.ant-menu-inline-collapsed {
      width: 56px !important;
      margin: 0 !important;
      .ant-menu-item {
        padding: 0 19px !important;
      }
    }
  }
}
.rb-main-box {
  padding: 16px;
  position: relative;
  flex: 1;
  background: #e4e8ed;
  // transition: 0.2s;
  // overflow: auto;
  // background:#fff;
  width: 100px;
}
.header-middle-box {
  height: 60px;
  background: linear-gradient(
    to left,
    #044695 0%,
    #044796 42.77%,
    #03a4e7 73.5%,
    #ffffff 100%
  );
  // background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg width='1920px' height='160px' viewBox='0 0 1920 160' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3EHeader%3C/title%3E %3Cdefs%3E %3ClinearGradient x1='116.446533%25' y1='48.5765584%25' x2='34.2163086%25' y2='49.9503072%25' id='linearGradient-1'%3E %3Cstop stop-color='%23586AC9' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%2330329C' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3ClinearGradient x1='50%25' y1='-2.48949813e-15%25' x2='50%25' y2='100%25' id='linearGradient-2'%3E %3Cstop stop-color='%23FFFFFF' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%23FFFFFF' stop-opacity='0' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3ClinearGradient x1='50%25' y1='-2.48949813e-15%25' x2='50%25' y2='100%25' id='linearGradient-3'%3E %3Cstop stop-color='%23FFFFFF' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%23FFFFFF' stop-opacity='0' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3Cfilter x='-1.3%25' y='-12.2%25' width='102.5%25' height='124.1%25' filterUnits='objectBoundingBox' id='filter-4'%3E %3CfeGaussianBlur stdDeviation='1.26' in='SourceGraphic'%3E%3C/feGaussianBlur%3E %3C/filter%3E %3ClinearGradient x1='50%25' y1='100%25' x2='50%25' y2='26.2620192%25' id='linearGradient-5'%3E %3Cstop stop-color='%23DDAE96' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%23E3AD90' offset='30.5752841%25'%3E%3C/stop%3E %3Cstop stop-color='%23FFD2BB' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3C/defs%3E %3Cg id='Header' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='%E8%A3%85%E9%A5%B0' transform='translate(-46.000000%2C -353.000000)'%3E %3Crect id='%E7%9F%A9%E5%BD%A2' fill='url(%23linearGradient-1)' x='46' y='352.915434' width='1920' height='160'%3E%3C/rect%3E %3Cpath d='M557.047861%2C366.309672 C557.047861%2C366.309672 2472.97585%2C616.568906 1982.8167%2C232.729035 C1492.65755%2C-151.110835 557.047861%2C366.309672 557.047861%2C366.309672 Z' id='Path-2' fill-opacity='0.08' fill='url(%23linearGradient-2)' transform='translate(1310.047861%2C 268.736319) scale(1%2C -1) rotate(-7.000000) translate(-1310.047861%2C -268.736319) '%3E%3C/path%3E %3Cpath d='M-2.27373675e-13%2C504.958173 C-2.27373675e-13%2C504.958173 2045.69204%2C805.87932 1522.33486%2C344.335774 C998.977672%2C-117.207772 -2.27373675e-13%2C504.958173 -2.27373675e-13%2C504.958173 Z' id='Path-2' fill-opacity='0.04' fill='url(%23linearGradient-3)' transform='translate(804.000000%2C 387.632291) scale(-1%2C -1) translate(-804.000000%2C -387.632291) '%3E%3C/path%3E %3C/g%3E %3Cg id='egypt_India-2' transform='translate(1340.823515%2C 0.729172)'%3E %3Cg id='egypt_India' transform='translate(182.732795%2C 85.274411) rotate(15.000000) translate(-182.732795%2C -85.274411) translate(4.405827%2C 44.774411)'%3E %3Cpath d='M8.65393479%2C70.7894483 C8.65393479%2C70.7894483 165.591998%2C-3.67287232 339.653935%2C79' id='Path-106' stroke='%23000000' stroke-width='1.9152' opacity='0.400000006' filter='url(%23filter-4)'%3E%3C/path%3E %3Cpath d='M52.1879343%2C42.6243674 C89.2590119%2C27.576771 130.117503%2C18.9836836 173.403788%2C20.1598192 C228.878113%2C21.6671171 284.04846%2C39.2470565 337.572484%2C76.1017603 L339.193918%2C77.2244727 L338.113951%2C78.7755273 C284.389161%2C41.3680654 229.022791%2C23.5617457 173.352453%2C22.0491219 C130.34724%2C20.8806233 89.7422054%2C29.4204054 52.8987788%2C44.3755955 C40.8115952%2C49.2819287 30.0196649%2C54.5379992 20.6683168%2C59.792567 L19.2921303%2C60.5719285 L17.9670141%2C61.3343513 C17.7504349%2C61.4599676 17.5359968%2C61.584846 17.3237065%2C61.7089706 L16.0757911%2C62.4445447 L14.8797397%2C63.1612589 L13.7358701%2C63.8583449 L12.6444997%2C64.5350342 L11.7627951%2C65.0908077 L11.0935688%2C65.5188479 L10.1962874%2C66.1029793 L9.19354085%2C66.775753 L8.11432872%2C65.2241728 L8.88032476%2C64.7073266 L9.7503352%2C64.1366317 L10.7486651%2C63.4959282 L11.1097731%2C63.2672515 C11.4597885%2C63.0463174 11.8186502%2C62.8218002 12.1863057%2C62.593828 L13.3156008%2C61.8996745 L14.4973428%2C61.1855599 C14.6986528%2C61.0649201 14.902135%2C60.9434806 15.1077827%2C60.8212575 L16.3676033%2C60.0786431 L17.6790819%2C59.3179901 L19.0419028%2C58.5400675 C19.2733007%2C58.4090173 19.5068246%2C58.2772796 19.7424681%2C58.1448704 C29.1609642%2C52.8525718 40.0241937%2C47.561776 52.1879343%2C42.6243674 Z' id='Path-106' fill='%23FFFFFF' fill-rule='nonzero' opacity='0.313067769'%3E%3C/path%3E %3Ccircle id='Oval-1' fill='url(%23linearGradient-5)' cx='8' cy='68.0328722' r='8'%3E%3C/circle%3E %3Cpath d='M158.906604%2C41.8416523 L163.479259%2C42 L175.531294%2C24.7783316 L188.106096%2C25.2137879 C190.003748%2C25.2795022 191.587546%2C23.8570799 191.651912%2C22.0292603 C191.716278%2C20.2014408 190.236397%2C18.6729255 188.338745%2C18.6072112 L175.763943%2C18.1717549 L164.952701%2C0.158347742 L160.380045%2C0 L165.475468%2C17.8154725 L152.900666%2C17.3800162 L149.626273%2C12.8568709 L146.196782%2C12.7381101 L148.211686%2C20.5249568 L145.653935%2C28.1534557 L149.083426%2C28.2722165 L152.668017%2C23.9865929 L165.242819%2C24.4220491 L158.906604%2C41.8416523 L158.906604%2C41.8416523 Z' id='palne' fill='%23FFFFFF'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.hearder-icon-nav {
  position: absolute;
  top: 72px;
  font-size: 20px;
  color: #fff !important;
  margin-left: 21px;
  transition: 0.2s;
}
.hearder-icon-nav-right {
  position: absolute;
  top: 83px;
  right: 22px;
  color: #ebecef !important;
  font-size: 12px;
}
</style>

<style lang="less">
.hearder-icon-nav {
  path {
    fill: #fff;
  }
}
.plane-img-box {
  position: absolute;
  right: 435px;
  top: -21px;
}
</style>
